<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title></title>
		<link rel="stylesheet" href="../css/common/mui.css" />
		<link rel="stylesheet" href="../css/common/common.css" />
		<style>
			
		</style>
	<body>
		<div class='tC promp-order' style='position:absolute;top:30%;left:15%;height:30%;width:70%;'>
				<img src="../img/animate/3.png" class='dIB' id='eat' style='width:60px;position:absolute;left:4rem;'/>
				<img src="../img/animate/6.png" class='dIB' id='food' style='width:16px;position:absolute;top:25px;left:10rem;'/>
				<img src="../img/animate/6.png" class='dIB' id='food2' style='width:16px;position:absolute;top:25px;left:13rem;'/>
				<p class='fS15 tC' style='margin-top:85px' >上洋玩易，吃好吃的！</p>
		</div>
	</body>
	<script src='../js/common/jquery.min.js'></script>
	<script>
		var ani = {
			eatL : ['../img/animate/3.png','../img/animate/9.png','../img/animate/2.png','../img/animate/4.png'],
			eatR : ['../img/animate/3.png','../img/animate/10.png','../img/animate/1.png','../img/animate/8.png'],
			foods : ['../img/animate/5.png','../img/animate/6.png'],
			eatE : $('#eat'),
			foodE1 : $('#food'),
			foodE2 : $('#food2'),
			foodL1 : null,
			foodL2 : null,
			eatEL :null,
			left : 0,
			direction : 1,
			time : null,
			index :0,
			init : function(){
				this.direction =1;
				var eatE =document.getElementById('eat');
				var foodE1 =document.getElementById('food');
				var foodE2 =document.getElementById('food2');
				this.eatEL =  window.getComputedStyle(eatE).left;
				this.left = parseInt(window.getComputedStyle(eatE).left);
				this.foodL1 = window.getComputedStyle(foodE1).left;
				this.foodL2 = window.getComputedStyle(foodE2).left;
				this.direL();
				
			},
			direL : function(){
				this.foodL1 = parseInt(this.foodL1);
				this.foodL2 = parseInt(this.foodL2);
					this.time = setInterval(function(){
						this.left+=5;
						this.index++;
						if(this.index == 3){
							this.index=0;
						}
						if(this.left >= this.foodL2-60 ){
													console.log('left1',this.left);
						console.log('foodl2',this.foodL2);
							this.foodE1[0].style.display = 'none';
							this.foodE2[0].style.display = 'none';	
						}
						if(this.left >= this.foodL1-60 && this.left <this.foodL2-60){
							this.foodE1[0].style.display = 'none';	
						}
						
						if(this.left >= this.foodL1-2 && this.left < (this.foodL1-16)){
							this.eatE.attr('src',this.eatL[3]);
						}else if(this.left >= this.foodL2-2 && this.left < (this.foodL2-16)){
							this.eatE.attr('src',this.eatL[3]);
						}else if(this.left > (this.foodL2+20)){
							this.drection = -1;
							clearInterval(this.time);
							this.foodE1[0].style.display = 'block';
							this.foodE2[0].style.display = 'block';
							this.eatE.attr('src',this.eatR[0]);
							this.direR();
						}else{
							this.eatE.attr('src',this.eatL[this.index]);
						}
							this.eatE[0].style.left = this.left+'px';
					}.bind(this),120);
			},
			direR : function(){
					this.foodL1 = parseInt(this.foodL1);
					this.foodL2 = parseInt(this.foodL2);
					this.time = setInterval(function(){
						this.left-=5;
						this.index++;
						if(this.index == 3){
							this.index=0;
						}
						if(this.left <= this.foodL1 ){
							this.foodE1[0].style.display = 'none';
							this.foodE2[0].style.display = 'none';	
						}
						if(this.left <this.foodL2 || (this.left >= this.foodL1 && this.left <this.foodL2)){
							this.foodE2[0].style.display = 'none';	
						}
						
						if(this.left >= this.foodL1+16  && this.left < (this.foodL1+18)){
							this.eatE.attr('src',this.eatR[3]);
						}else if(this.left >= this.foodL2+16 && this.left < (this.foodL2+18)){
							this.eatE.attr('src',this.eatR[3]);
						}else if(this.left < (this.foodL1-80)){
							this.drection = -1;
							clearInterval(this.time);
							this.eatE.attr('src',this.eatL[0]);
							this.foodE1[0].style.display = 'block';
							this.foodE2[0].style.display = 'block';
							this.direL();
						}else{
							this.eatE.attr('src',this.eatR[this.index]);
						}
						this.eatE[0].style.left = this.left+'px';
					}.bind(this),120);
			}
		}
		window.onload = function(){
			ani.init();
		}
	</script>
</html>
